<template xmlns="http://www.w3.org/1999/html">
<div class="home-container">
  <div class="statistics-section">
    <el-row :gutter="24">
      <el-col :span="8" v-for="(item,index) in itemTitle" :key="item.index">
        <div class="statistics-card">
          <div class="card-header">
            <span class="card-title">{{ item.name }}</span>
            <el-icon><DataLine /></el-icon>
          </div>
          <div class="card-content">
            <div class="data-value" v-if="index!=0 && index!=2">{{ item.data }}</div>
            <el-statistic v-if="index==0 || index==2" title="" :value="item.data" value-style="font-size:24px;color:#165dff" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <div class="quick-access-section">
    <el-row :gutter="24">
      <el-col :span="4" v-for="item in midTitle" :key="item.index">
        <div class="quick-access-card">
          <img class="card-icon" src="../../../public/logo.gif">
          <div class="card-title">{{item.name}}</div>
        </div>
      </el-col>
    </el-row>
  </div>

  <div class="function-section">
    <el-row :gutter="24">
      <el-col>
        <div class="function-grid">
          <a class="function-card" v-for="(item, index) in functionItems" :key="index" @click="salesmanManagement(item.type)">
            <div class="card-icon">
              <el-icon><Avatar /></el-icon>
            </div>
            <div class="card-title">{{item.title}}</div>
          </a>
        </div>
      </el-col>
    </el-row>
  </div>

  <div class="charts-section">
    <div class="charts-container">
      <div class="chart-card">
        <div ref="barChart" class="echarts-chart"></div>
      </div>
      <div class="chart-card">
        <div ref="pieChart" class="echarts-chart"></div>
      </div>
    </div>
  </div>

  <div class="profit-section">
    <div class="profit-container">
      <div class="filter-group">
        <el-radio-group v-model="radio1" size="large" @change="changStaTyp" is-button>
          <el-radio-button :label="0">全部</el-radio-button>
          <el-radio-button :label="1">日</el-radio-button>
          <el-radio-button :label="2">周</el-radio-button>
          <el-radio-button :label="3">月</el-radio-button>
          <el-radio-button :label="4">季度</el-radio-button>
          <el-radio-button :label="5">近半年</el-radio-button>
          <el-radio-button :label="6">近一年</el-radio-button>
        </el-radio-group>
      </div>
      <div class="chart-card">
        <div ref="profitChart" class="echarts-chart"></div>
      </div>
    </div>
  </div>
</div>

<div v-if="status==2">
  <div class="welcome">
  <div class="content">
    <div class="sub-title">欢迎使用</div>
    <div class="title">互抬后台管理系统</div>
    <div class="desc">
      - Vue3.0+ElementPlus打造通用后台管理系统
    </div>
  </div>
  <div class="img"></div>
</div>
</div>
</template>

<style lang="scss">
.home-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.statistics-section {
  margin-bottom: 24px;
  
  .statistics-card {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      .card-title {
        font-size: 14px;
        color: #606266;
      }
      
      .card-icon {
        font-size: 24px;
        color: #165dff;
      }
    }
    
    .card-content {
      .data-value {
        font-size: 24px;
        font-weight: 600;
        color: #165dff;
      }
    }
  }
}

.quick-access-section {
  margin-bottom: 24px;
  
  .quick-access-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .card-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 12px;
    }
    
    .card-title {
      font-size: 14px;
      color: #606266;
    }
  }
}

.function-section {
  margin-bottom: 24px;
  
  .function-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    
    .function-card {
      flex: 1;
      min-width: 200px;
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      text-align: center;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        background: #165dff;
        color: #fff;
        
        .card-icon {
          color: #fff;
        }
      }
      
      .card-icon {
        font-size: 32px;
        color: #165dff;
        margin-bottom: 12px;
      }
      
      .card-title {
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
}

.charts-section {
  margin-bottom: 24px;
  
  .charts-container {
    display: flex;
    gap: 24px;
    
    .chart-card {
      flex: 1;
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      
      .echarts-chart {
        height: 300px;
      }
    }
  }
}

.profit-section {
  .profit-container {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    
    .filter-group {
      margin-bottom: 24px;
      display: flex;
      justify-content: center;
    }
    
    .chart-card {
      .echarts-chart {
        height: 400px;
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .home-container {
    padding: 16px;
  }
  
  .charts-section {
    .charts-container {
      flex-direction: column;
    }
  }
  
  .function-section {
    .function-grid {
      .function-card {
        min-width: calc(50% - 8px);
      }
    }
  }
}

// 欢迎页面样式
.welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 750px;
  background-color: #fff;

  .content {
    position: relative;
    bottom: 40px;
    text-align: center;

    .sub-title {
      font-size: 30px;
      line-height: 42px;
      color: #333;
      margin-bottom: 16px;
    }

    .title {
      font-size: 40px;
      line-height: 62px;
      color: #165dff;
      margin-bottom: 24px;
    }

    .desc {
      font-size: 14px;
      color: #909399;
    }
  }

  .img {
    width: 371px;
    height: 438px;
    margin-left: 105px;
    background-image: url("../../assets/imgs/welcome.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
}
</style>

<script setup lang="ts" >
import * as echarts from 'echarts';
import * as HomeApi from "@/api/home";
import * as UserApi from '@/api/hutai/clientpool';
import { Avatar,DataLine } from '@element-plus/icons-vue'
const { push } = useRouter()
const itemTitle = reactive([])
  const radio1 = ref(0)
  const barChart = ref(null);
  const pieChart = ref(null);
  const profitChart = ref(null);
  const status = ref(null)
  const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
  const profitArr = ref([]);
  const salesData =  []
  const staType = ref(0);

  const renderBarChart = () => {
    const chart = echarts.init(barChart.value);
    const option = {
      title: {
        text: '放款金额统计'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: months,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: salesData
        }
      ]
    };
    chart.setOption(option);
  };

  const renderPieChart = () => {
    const chart = echarts.init(pieChart.value);
    const option = {
      // title: {
      //   text: '放款金额统计'
      // },
      series: [
        {
          type: 'pie',
          radius: '75%',
          data: months.map((month, index) => ({
            name: month,
            value: salesData[index]
          }))
        }
      ]
    };
    chart.setOption(option);
  };

const renderProfitChart = () => {
  const chart = echarts.init(profitChart.value);
  // const option = {
  //   title: {
  //     text: '平台利润统计'
  //   },
  //   series: [
  //     {
  //       type: 'pie',
  //       radius: '100%',
  //       data: profitArr.value
  //     }
  //   ]
  // };
  const option = {
    title: {
          text: '平台利润统计'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
        left: 'center'
    },
    series: [
      {
        name: '平台利润统计',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: profitArr.value
      }
    ]
  };

  chart.setOption(option);
};

  // onMounted(() => {
  //   renderBarChart();
  //   renderPieChart();
  // });

const getList = async () => {
  try {
    //获取当前用户
    const user = await UserApi.getUser();
    console.log(user.userType)
    if (user.userType == '2' || user.userType=='3' || user.userType=='4'){
     status.value = 2
    }else {
      status.value = 1
      const data = await HomeApi.getCountData();
      const yearCount = await HomeApi.getPerformanceStatistics();
      for (var i=0;i<yearCount.length;i++){
        salesData.push(yearCount[i])
      }

      profitArr.value = await HomeApi.getPlatformProfit(staType.value);

      console.log(profitArr.value);
      // console.log(salesData);
      // console.log(yearCount);
      renderBarChart();
      renderPieChart();
      renderProfitChart();
      for(var i=0;i<data.length;i++){
        itemTitle.push(data[i]);
      }
    }

  } finally {
  }
}

const  changStaTyp = async (e) => {
  profitArr.value = await HomeApi.getPlatformProfit(e);
  renderProfitChart();
}

const salesmanManagement = async (num:number) => {
  if (num==1){
    push('/salesman');
  }else if (num==2){
    push('/certificateHolder');
  }else if (num==3){
    push('/clientpool');
  }else if (num==4){
    push('/applypage');
  }else if (num==5){
    push('/products');
  }


}

/** 初始化 **/
onMounted(() => {
  getList()
})
// const itemTitle: Record<string, string>[] = [
//   { name: '当天额度评估（元）', data: '28400.00',image:"el-icon-edit" },
//   { name: '成交订单统计（笔）', data: '564',image:"el-icon-edit" },
//   { name: '成交额度统计（元）', data: '89943.00' ,image:"el-icon-edit"},
//   { name: '用户统计（人）', data: '564287' ,image:"el-icon-edit"},
//   { name: '今日新增用户统计（人）', data: '309' ,image:"el-icon-edit"},
//   { name: '成交用户统计（人）', data: '4512' ,image:"el-icon-edit"},
// ];
// const midTitle: Record<string, string>[] = [
//   { name: '业务员管理',image:"el-icon-edit" },
//   { name: '权证管理',image:"el-icon-edit" },
//   { name: '客户池',image:"el-icon-edit"},
//   { name: '订单列表',image:"el-icon-edit"},
//   { name: '产品管理',image:"el-icon-edit"},
//   { name: '机构管理',image:"el-icon-edit"},
// ]

// 添加功能卡片数据
const functionItems = [
  { title: '客户池', type: 3 },
  { title: '订单列表', type: 4 },
  { title: '业务员管理', type: 1 },
  { title: '权证员管理', type: 2 },
  { title: '产品管理', type: 5 }
]
</script>


